<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>视频学习</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css?v=3" />
    <link rel="stylesheet" type="text/css" href="css/popup.css?v=2" />
    <script src="js/config.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/component.js?v=78"></script>
    <script src="js/navbar-component.js?v=2"></script>
    <script src="js/vue/vue-router.js"></script>
    <script src="js/srt.js?v=7"></script>
    <script src="js/moment.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        body{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        #container>div:nth-last-child(1){            
            margin-bottom:300px;
        }
        
    </style>
    <script>
        moment.locale("zh-cn")
    </script>
</head>

<body>
    <div id="app" v-cloak>
        <nav-top-bar :golink="backLink" linktitle="视频学习"></nav-top-bar>
        <div class="shipinxuexi-box1">
            <p class="shipin-name">{{video.title}}</p>
            <p class="shipin-subtitle" v-if="video.subtitle">{{video.subtitle}}</p>
            <div class="shipin-shuju">
                <span>
                    <img src="img/index/icon-shipinxuexi_03.png" class="shuju-icon" />
                    {{video.hot}}
                </span>
                <span>
                    <img src="img/index/icon-shipinxuexi_05.png" class="shuju-icon" @click="showNote" />
                    {{ favorStatus.favorNum }}
                </span>
                <span>
                    <img src="img/index/icon-shipinxuexi_07.png" class="shuju-icon" />
                    {{ video.share }}
                </span>
            </div>
        </div>
        <div class="video" style="position:relative;">
            <video x5-playsinline="" playsinline="" x-webkit-airplay="allow" style="object-fit:fill" id="video" controls
                preload="auto" width="100%" :src="videoUrl">
            </video>            
        </div>
        <div class="kouyulianxi-wrapper">
            <div class="kouyulianxi-box1" :style="{fontSize:fontSize,lineHeight:lineHeight}">
                <div style="height:300px;overflow:scroll;padding-bottom: 3rem;" id="container">
                    <div v-for="(item,index) in content" :id="'id'+index">
                        <div class="kouyu-ying" v-if="en"
                            v-bind:style="index == now?'color:red;text-align: center;':'text-align: center;'">
                            <span v-for="ii in item.en" @click="checkword(ii)">
                                {{ii}}
                            </span>
                        </div>
                        <div style="height:0.2rem" v-if="!cn"></div>
                        <div v-if="cn" class="kouyu-zhong"
                            v-bind:style="index == now?'color:red;text-align: center;':'text-align: center;'">
                            {{item.cn}}
                        </div>
                    </div>
                    <!-- <div stle="background:red;height:100px;">helhhhlo world</div> -->
                </div>

                <div class="huanyiju-btn" style="display:none;">
                    换一句
                </div>
            </div>
        </div>

        <div class="footbox">
            <div class="footer">
                <ul>
                    <li>
                        <a :href="'cihuixuexi.html?id='+id">
                            <img src="img/index/icon-shipinxuexi_19.png" />
                            <p>词汇学习</p>
                        </a>
                    </li>
                    <li>
                        <a :href="'tinglilianxi.html?id='+id">
                            <img src="img/index/icon-shipinxuexi_22.png" />
                            <p>听力练习</p>
                        </a>
                    </li>
                    <li>
                        <a :href="'kouyulianxi.html?id='+id">
                            <img src="img/index/icon-shipinxuexi_13.png" />
                            <p>口语练习</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" @click="moreOp">
                            <img src="img/index/icon-shipinxuexi_16.png" />
                            <p>更多</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 语速设置 -->
        <div class="tongxuefasheng" v-if="speedOpShow">
            <div class="pop-mask"></div>
            <div class="tongxuefasheng-cont">
                <div class="touxuefasheng-top">
                    语速设置
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" @click="speedOp" />
                </div>
                <ul class="zimushezhi-cells" id="setSpeed">
                    <li class="zimushezhi-cell" :class="item == getSpeed ? 'on' : ''" @click="videoSpeed(item, index)"
                        v-for="(item, index) in playSpeeds" :key="item">
                        {{ item }}X
                    </li>
                </ul>
            </div>
        </div>

        <!-- 笔记 -->
        <div class="tongxuefasheng" v-if="note.show">
            <div class="pop-mask"></div>
            <div class="tongxuefasheng-cont">
                <div class="touxuefasheng-top">
                    笔记留言
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" @click="note.show=false" />
                </div>
                <div class="touxuefasheng-cells">
                    <div class="touxuefasheng-cell d-f a-c-c" v-for="item in note.list">
                        <img :src="item.avatar_url" class="touxue-toux" />
                        <div class="touxuefasheng-xq">
                            <p class="tongxue-name">
                                {{ item.nick_name }}
                                <span class="plsj">{{ timeFormat(item.create_time) }}</span>
                            </p>
                            <div class="txfs-cell-foot">{{ item.note }}</div>
                        </div>
                    </div>
                </div>
                <div class="liuyan-foot d-f a-c-c">
                    <input type="text" maxlength="200" class="liuyan-input flex1" v-model="note.text" />
                    <span class="send" @click="sendNote">发送</span>
                </div>
            </div>
        </div>
        <!-- 单词释义 -->
        <div class="tongxuefasheng" style="display: none;">
            <div class="pop-mask"></div>
            <div class="tongxuefasheng-cont">
                <div class="touxuefasheng-top">
                    释义
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" />
                </div>
                <div class="dancixiangqing-box1 d-f j-c-s">
                    <div class="dancixiangqing-body flex1">
                        <p class="danci-title">Etiology</p>
                        <div class="danci-yufa">
                            <span class="yufa-box">
                                英 [i ti ləd i]
                                <img class="shengyin-icon" src="img/index/icon_shengyin.png" />
                            </span>
                            <span class="yufa-box">
                                美 [i ti ɑ ləd i]
                                <img class="shengyin-icon" src="img/index/icon_shengyin.png" />
                            </span>
                        </div>
                        <p class="danci-jieshi">n.病因学</p>
                    </div>
                    <div class="dancixianqing-extra">
                        <button class="qwjs">权威解释</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 翻译 -->
        <div class="tongxuefasheng" v-if="trans.show">
            <div class="pop-mask" @click="transClose"></div>
            <div class="tongxuefasheng-cont" v-if="trans.data">
                <audio id="transAudio" class="hide" :src="trans.data.tts"></audio>
                <div class="touxuefasheng-top">
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" @click="transClose" />
                </div>
                <div class="fanyi-cell">
                    <h1>
                        {{ trans.word }}
                        <img class="trans-icon"
                            :src="trans.playing ? 'img/index/icon_ship_yuyin_pre.png' : 'img/index/icon_ship_yuyin.png'"
                            @click="wordPlay" />
                    </h1>
                </div>
                <div class="fanyi-cell">
                    <span class="trans-symbols" v-for="item in trans.data.pronunciation">
                        /{{ item }}/
                    </span>
                </div>
                <template v-for="item in trans.data.parts">
                    <div class="fanyi-cell">
                        <template v-for="part in item">
                            <p class="fanyi-cell-text fanyi-cell-text2">{{ part.part }} {{ part.means.join('； ') }}</p>
                        </template>
                    </div>
                </template>
                <div class="liuyan-foot d-f a-c-c" style="position: relative;">
                    <button class="zhuanti-foot-btn" @click="addWord">加入生词本</button>
                </div>
            </div>
        </div>
        <!-- 分享 -->
        <div class="tongxuefasheng" v-if="shareShow">
            <div class="pop-mask"></div>
            <div class="tongxuefasheng-cont">
                <div class="touxuefasheng-top">
                    分享
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" />
                </div>
                <div class="fenxiang-cells d-f">
                    <div class="fenxiang-cell-list">
                        <img src="img/fenxiang/icon_ship_haibao.png" class="fenxiang-icon" />
                        <p class="fenxiang-title">生成海报</p>
                    </div>
                    <div class="fenxiang-cell-list">
                        <img src="img/fenxiang/icon_ship_pengyquan%20.png" class="fenxiang-icon" />
                        <p class="fenxiang-title">朋友圈</p>
                    </div>
                    <div class="fenxiang-cell-list">
                        <img src="img/fenxiang/icon_ship_hwechat.png" class="fenxiang-icon" />
                        <p class="fenxiang-title">微信</p>
                    </div>
                    <div class="fenxiang-cell-list">
                        <img src="img/fenxiang/icon_ship_weibo.png" class="fenxiang-icon" />
                        <p class="fenxiang-title">微博</p>
                    </div>
                    <div class="fenxiang-cell-list">
                        <img src="img/fenxiang/icon_ship_qq.png" class="fenxiang-icon" />
                        <p class="fenxiang-title">QQ</p>
                    </div>
                    <div class="fenxiang-cell-list">
                        <img src="img/fenxiang/icon_ship_lianjie.png" class="fenxiang-icon" />
                        <p class="fenxiang-title">复制链接</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 字幕设置 -->
        <div class="tongxuefasheng" v-if="subtitleOpShow">
            <div class="pop-mask"></div>
            <div class="tongxuefasheng-cont">
                <div class="touxuefasheng-top">
                    字幕设置
                    <img src="img/index/icon_quxiao.png" class="quxiao-icon" @click="subtitleOp" />
                </div>
                <ul class="zimushezhi-cells" id="subtitles">
                    <li class="zimushezhi-cell" :class="getSubtitleIndex == index ? 'on' : ''"
                        @click="switchSubtitle(item.en, item.cn, index)" v-for="(item, index) in subtitles" :key="item">
                        {{ item.con }}
                    </li>
                </ul>
            </div>
        </div>
        <!-- 更多视频 -->
        <div class="tongxuefasheng" v-if="moreOpShow">
            <div class="pop-mask" @click="moreOp"></div>
            <div class="tongxuefasheng-cont shipingengduo d-f">
                <div class="gengduo-cell">
                    <img src="img/more/icon_ship_qiehuan.png" class="qiehuan-icon" @click="subtitleOp" />
                    <p class="zimuxianshi">字幕显示</p>
                </div>
                <div class="gengduo-cell">
                    <img src="img/more/icon_ship_sudu.png" class="qiehuan-icon" @click="speedOp" />
                    <p class="zimuxianshi">播放速度</p>
                </div>
                <div class="gengduo-cell" @click="onFavor()">
                    <img :src="isFavora? 'img/more/icon_ship_shouc_pre.png' : 'img/more/icon_ship_shouc.png'"
                        class="qiehuan-icon" />
                    <p class="zimuxianshi">视频收藏</p>
                </div>
            </div>
        </div>

        <!-- 购买视频 -->
        <div class="likePop" v-if="showBuy">
            <div class="pop-mask" @click="go('/')"></div>
            <div class="likeCont">
                <p class="likeCont-text">本视频需付费后才能观看</p>
                <div class="like-foot">
                    <button class="like-foot-btn buy-foot-btn" @click="go('/VIP.html')">购买VIP</button>
                    <button class="like-foot-btn like-btn-ljsz" @click="payAction()">购买视频</button>
                </div>
            </div>
        </div>

        <!-- 通用toast弹窗 -->
        <div class="toast" v-show="toastShow">
            {{toastText}}
        </div>
    </div>
</body>
<script>
    //可以专栏和视频轮流获取
    let router = new VueRouter({
        mode: 'history'
    })
    var vue = new Vue({
        el: "#app",
        router,
        data() {
            return {
                fontSize:"0.28rem",
                lineHeight:"0.38rem",
                msg: "hello world",
                id: 0,
                videoUrl: '',
                coverUrl: '',
                video: {},
                play: {
                    startTime: 0,
                    status: false,
                    watch: 0,
                },
                vttUrl: '',
                favorStatus: {},
                isFavora: false,
                content: [],
                shareCounts: 0,

                sentenceLink: {},
                sentenceLinkFlip: {},

                videoInstance: null,
                now: 0, //当前播放的进度
                playSpeeds: [0.5, 0.75, 1, 1.25, 1.5, 2, 3],
                getSpeed: 1,

                subtitles: [{
                    con: '中英字幕',
                    en: true,
                    cn: true
                }, {
                    con: '英文字幕',
                    en: true,
                    cn: false
                }, {
                    con: '中文字幕',
                    en: false,
                    cn: true
                }, {
                    con: '无字幕',
                    en: false,
                    cn: false
                }],
                getSubtitleIndex: 0,

                moreOpShow: false,
                en: true,
                cn: true,
                subtitleOpShow: false,
                speedOpShow: false,
                shareShow: false,

                // 笔记
                note: {
                    show: false,
                    hasMore: true,
                    loading: false,
                    page: 1,
                    list: [],
                    text: ''
                },

                // 翻译
                trans: {
                    word: '',
                    show: false,
                    playing: false,
                    data: null,
                    replay: true
                },

                // toast弹窗
                toastText: '',
                toastShow: false,

                // 购买视频
                pay: null,
                showBuy: false,
            }
        },
        async mounted() {
            this.id = this.$route.query.id
            await this.getVideoInfo();
            await this.getFavorStatus();

            if (this.isWechant) {
                await this.getWxConfig();
            }
            this.getFont()
        },
        computed: {
            //判断是否是微信浏览器的函数（如果需要完善QQ的分享请判断浏览器环境后自行设置相关配置）
            isWechant() {
                var ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            },

            // 页面回退
            backLink() {
                return document.referrer || '/'
            }
        },
        methods: {
            getFont(){
                axios.get("/mp/user/getfont").then(res=>{
                    let base = parseInt(res.data) / 100 ;
                    this.fontSize = base + "rem";
                    this.lineHeight = (base + 0.10) + "rem";
                })
            },
            async getWxConfig() {
                await axios.get('/mp/open/jssdk').then((res) => {
                    /* 微信官方config初始化 */
                    var data = res.data.data;
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature, // 必填，签名
                        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
                    });
                });

                /* 微信官方ready */
                wx.ready(() => {
                    let desc = this.video.desc?this.video.desc:'这里有最前沿、最全面的医学英语视频！通过欣赏精彩视频，全面提升你的听力水平、口语能力、阅读能力、词汇量、语感，同时提高临床实践能力！ 医生有你，医课学习。'
                    desc = desc.replace(/<[^>]*>/g,'')
                    desc = desc.replace("&nbsp;",'')
                    let shareData = {
                        title: this.video.title, // 分享标题
                        desc, // 分享描述
                        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: this.video.cover_url, // 分享图标(不能赋相对路径，一定要是绝对路径)
                        success: () => {
                            axios.post('/mp/video/share', {
                                id: this.video.id
                            }).then(e => {
                                this.video.share = e.data;
                            });
                        },
                    };

                    wx.onMenuShareTimeline(shareData);
                    wx.onMenuShareAppMessage(shareData);
                    // wx.updateTimelineShareData(shareData);
                    // wx.updateAppMessageShareData(shareData);
                });
            },

            speedOp() {
                this.speedOpShow = !this.speedOpShow
                if (this.speedOpShow) {
                    this.moreOpShow = false
                }
            },
            subtitleOp() {
                this.subtitleOpShow = !this.subtitleOpShow
                this.moreOpShow = false
            },
            switchSubtitle(en, cn, index) {
                var getSubtitles = document.getElementById('subtitles');
                for (var i = 0; i < getSubtitles.children.length; i++) {
                    getSubtitles.children[i].classList.remove('on');
                }
                getSubtitles.children[index].classList.add('on');

                localStorage.setItem('selectedSubtitleIndex', index);
                this.getSubtitleIndex = localStorage.getItem('selectedSubtitleIndex');

                this.en = en;
                this.cn = cn;

            },
            moreOp() {
                this.moreOpShow = !this.moreOpShow
            },
            checkword(word) {
                word = word.replace(/[,\.;\[\]=]+/g,'')
                axios.post('/mp/word/trans', {
                    word
                }).then(e => {
                    if (e.data.code) {
                        this.toast('词汇翻译失败');
                    } else {
                        this.trans.word = word;
                        this.trans.data = e.data;
                        this.trans.show = true;
                        this.trans.replay = this.play.status;
                        this.videoInstance.pause();
                    }
                });
            },
            wordPlay() {
                const listen = () => {
                    this.trans.playing = false;
                    transAudio.removeEventListener('ended', listen);
                };
                transAudio.addEventListener('ended', listen);
                transAudio.play();
                this.trans.playing = true;
            },
            transClose() {
                this.trans.show = false;
                this.trans.data = null;
                if (this.trans.replay) {
                    this.videoInstance.play();
                }
            },
            addWord() {
                axios.post('/mp/word/add', {
                    word: this.trans.word
                }).then(e => {
                    if (e.data.code) {
                        this.toast('添加成功');
                    } else {
                        this.toast(e.data.msg);
                    }
                });
            },
            async getVideoInfo() {                
                await axios.post('/mp/video/videoInfo', {
                    id: this.id
                }).then(res => {                    
                    if (0 == res.data.code) {
                        const data = res.data.data;
                        // 返回异常处理
                        if ('string' === typeof data) {
                            // 异常提示，提示完后回去首页
                            this.toast(data).then(() => {
                                window.location.href = '/';
                            });
                            return;
                        }
                        // 返回的是对象时，根据类型来处理
                        switch (data.type) {
                            case 'topic':
                                window.location.href = `/zhuantimulu.html?action=add&id=${data.id}&action=${data.action}`;
                                return;

                            case 'video':
                                if ('buy' === data.action) {
                                    this.pay = data;
                                    this.showBuy = true;
                                }
                                return;

                            default:
                                this.toast('视频不存在或已删除').then(() => {
                                    window.location.href = '/';
                                });
                                return;
                        }

                    } else {
                        this.videoUrl = res.data.PlayInfoList['PlayInfo'][0]['PlayURL'];
                        this.vttUrl = res.data.subtitle_src
                        this.coverUrl = res.data.VideoBase['CoverURL'];
                        this.video = res.data.video;
                        this.play.startTime = res.data.time;
                        if (!this.videoInstance) {
                            this.videoInstance = document.getElementById("video");
                            this.wordContainer = document.getElementById("container");
                            // 视频播放进度更新
                            this.videoInstance.addEventListener('timeupdate', () => {
                                // 兼容安卓设置当前播放时间
                                if (!this.videoUpdateTime) {
                                    this.videoUpdateTime = true;
                                    this.videoInstance.currentTime = this.play.startTime;
                                }
                                let now = Math.floor(this.videoInstance.currentTime);
                                if (this.content[now]) {
                                    this.now = now
                                    let top = document.getElementById("id" + now).offsetTop
                                    this.wordContainer.scrollTop = top
                                }
                            });

                            // 注册播放器开始、暂停和结束的记录
                            this.videoInstance.addEventListener('play', () => {
                                this.play.status = true;
                            });
                            this.videoInstance.addEventListener('pause', () => {
                                this.play.status = false;
                            });
                            this.videoInstance.addEventListener('ended', () => {
                                this.play.status = false;
                                this.updateProgress();
                                //自动播放下一个 请求下一个数据 直接跳转
                                setTimeout(()=>{
                                    axios.get("/mp/video/next?id="+this.video.id).then(r=>{
                                        console.log(r,'下一个视频 加载就有');
                                        if(r.data){                 
                                            window.location.href="/shipinxuexi.html?id="+r.data
                                        }
                                    })
                                },5000)
                            });
                            // 注册定时记录视频播放进度
                            setInterval(() => {
                                if (this.play.status) {
                                    // if (0 === (++this.play.watch % 10)) {
                                    //     this.updateProgress();
                                    // }
                                    this.updateProgress();
                                }
                            }, 10000);
                        }
                        axios.get("/mp/video/getWordScreen", {
                            params: {
                                id: this.id
                            }
                        }).then(res => {
                            this.content = res.data;

                            let tmp = 0;
                            for (let key in this.content) {
                                this.sentenceLink[tmp] = parseInt(key); //一开始就转 一次性解决
                                this.sentenceLinkFlip[key] = parseInt(tmp);
                                //this.content[key]['en'] = this.content[key]['en'].split(/[\s,\.;]+/);
                                if(this.content[key]['en']){
                                    this.content[key]['en'] = this.content[key]['en'].split(/[\s]+/);
                                }else{
                                    this.content[key]['en'] = []
                                }
                                
                                
                                this.content[key]['exact'] = this.content[key]['start_millisecond'];
                                tmp = key;
                            }
                        });
                    }
                });
            },
            payAction() {
                axios.post('/mp/order/order', { id: this.pay.id, type: 'video' }).then(e => {
                    WeixinJSBridge.invoke('getBrandWCPayRequest', {
                        "appId": e.data.appId,
                        "nonceStr": e.data.nonceStr,
                        "package": e.data.package,
                        "paySign": e.data.paySign,
                        "signType": e.data.signType,
                        "timeStamp": e.data.timeStamp,
                    }, (res) => {
                        switch (res.err_msg) {
                            case 'get_brand_wcpay_request:cancel':
                                // alert('用户取消支付！');
                                break;
                            case 'get_brand_wcpay_request:fail':
                                // alert('支付失败！（' + res.err_desc + '）');
                                break;
                            case 'get_brand_wcpay_request:ok':
                                // alert('支付成功！');
                                this.showBuy = false;
                                this.toast('购买成功').then(() => {
                                    location.reload();
                                });
                                break;
                            default:
                                // console.log(JSON.stringify(res));
                                // alert(JSON.stringify(res));
                                break;
                        }
                    });
                });
            },
            // 当前视频是否被收藏 收藏的数量
            onFavor() {
                this.isFavora = !this.isFavora;
                axios.get("/mp/video/favor", {
                    params: {
                        id: this.id,
                        isfavor: this.isFavora
                    }
                }).then(res => {
                    this.getFavorStatus();
                })
            },

            async getFavorStatus() {
                await axios.get("mp/video/favorStatus", {
                    params: {
                        id: this.id
                    }
                }).then(res => {
                    this.favorStatus = res.data;
                    this.isFavora = this.favorStatus.isFavor;
                })
            },
            videoSpeed(speed, index) {
                this.videoInstance.playbackRate = speed;
                var speedCells = document.getElementById('setSpeed');
                for (var i = 0; i < speedCells.children.length; i++) {
                    speedCells.children[i].classList.remove('on');
                }
                speedCells.children[index].classList.add('on');

                localStorage.setItem('playSpeed', speed);
                this.getSpeed = localStorage.getItem('playSpeed');
            },
            updateProgress() {
                axios.post('mp/video/updateProgress', {
                    id: this.id,
                    // time: this.videoInstance.currentTime,
                    // watchTime: this.play.watch
                    watchTime: 10 * this.getSpeed  //考虑到倍速播放，因此要乘以倍速
                });
            },

            // 显示笔记
            showNote() {
                this.note.show = true;
                if (this.note.hasMore) {
                    this.getNoteList();
                }
            },
            // 加载笔记列表
            getNoteList() {
                this.note.loading = true;
                axios.get(`/mp/video/getNoteList?id=${this.id}&page=${this.note.page}`).then(e => {
                    this.note.loading = false;
                    this.note.hasMore = 20 === e.data.length;
                    this.note.list.push(...e.data);
                });
            },
            // 发送笔记
            sendNote() {
                const text = this.note.text.trim();
                if (0 === text.length) {
                    return this.toast('请先输入笔记内容');
                }
                axios.post('mp/video/sendNote', {
                    id: this.id,
                    note: text
                }).then(e => {
                    if (e.data.hasOwnProperty('code') && 0 === e.data.code) {
                        this.toast(e.data.msg);
                    } else {
                        this.note.list.unshift(e.data);
                        this.note.text = '';
                        this.favorStatus.favorNum++;
                        this.toast('笔记记录成功');
                    }
                });
            },

            // toast弹窗
            toast(message, time = 3000) {
                return new Promise(result => {
                    this.toastText = message;
                    this.toastShow = true;
                    setTimeout(() => {
                        this.toastShow = false;
                        result();
                    }, time);
                });
            },

            // 时间转换
            timeFormat(source) {
                // const now = new Date();
                // const time = new Date(source);
                let m1 = moment();
                //获取需要对比的时间
                let m2 = moment(source);
                //计算相差多少天 day可以是second minute
                let day = m2.diff(m1, 'day');

                console.log('day',day)

                let format = '';
                if (day==0) {
                    // format = `今天 ${this.PrefixInteger(time.getHours())}:${this.PrefixInteger(time.getMinutes())}`
                    format = '今天' + moment(source).format('HH:mm')
                    console.log('format',format)
                } else {
                    format =  moment(source).format('YYYY-MM-DD HH:mm')
                    // format = `${time.getFullYear()}-${this.PrefixInteger(time.getMonth() + 1)}-${this.PrefixInteger(time.getDate())} ${this.PrefixInteger(time.getHours())}:${this.PrefixInteger(time.getMinutes())}`;
                }
                return format;
            },

            // 自动补0
            PrefixInteger(num, m = 2) {
                return (Array(m).join(0) + num).slice(-m);
            },

            go(url) {
                location.href = url;
            }
        }
    })
</script>

</html>